<style lang="less">
    @import "../main.less";
</style>
<template>
    <div class="main" :class="{'main-hide-text': shrink}">
        <div class="sidebar-menu-con" :style="{width: shrink?'60px':'160px', overflow: shrink ? 'visible' : 'auto'}">
            <shrinkable-menu 
                :shrink="shrink"
                @on-change="handleSubmenuChange"
                :theme="menuTheme" 
                :before-push="beforePush"
                :open-names="openedSubmenuArr"
                :menu-list="menuList">
            </shrinkable-menu>
        </div>
        <div class="" :style="{paddingLeft: shrink?'60px':'160px'}">
            <div class="tags-con">
                <!-- 这里就是头部标签栏 -->
                <tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>
            </div>
        </div>
        <div class="single-page-con-new" :style="{left: shrink?'60px':'160px'}">
            <div class="single-page">
                <keep-alive :include="cachePage">
                    <router-view></router-view><!-- 内容页 -->
                </keep-alive>
            </div>
        </div>
    </div>
</template>
<script>
    import shrinkableMenu from '@/views/main-components-new/shrinkable-menu/shrinkable-menu.vue';//左侧栏菜单
    import tagsPageOpened from '@/views/main-components-new/tags-page-opened.vue';
    import breadcrumbNav from '@/views/main-components-new/breadcrumb-nav.vue';
    import fullScreen from '@/views/main-components-new/fullscreen.vue';
    import lockScreen from '@/views/main-components-new/lockscreen/lockscreen.vue';
    import messageTip from '@/views/main-components-new/message-tip.vue';
    import themeSwitch from '@/views/main-components-new/theme-switch/theme-switch.vue';
    import Cookies from 'js-cookie';
    import util from '@/libs/util.js';
    
    export default {
        components: {
            shrinkableMenu,
            tagsPageOpened,
            breadcrumbNav,
            fullScreen,
            lockScreen,
            messageTip,
            themeSwitch
        },
        data () {
            return {
                shrink: false,
                userName: '',
                isFullScreen: false,
                openedSubmenuArr: this.$store.state.app.openedSubmenuArr
            };
        },
        computed: {
            menuList () {
                return this.$store.state.app.menuList;
            },
            pageTagsList () {
                return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
            },
            currentPath () {
                return this.$store.state.app.currentPath; // 当前面包屑数组
            },
            avatorPath () {
                return localStorage.avatorImgPath;
            },
            cachePage () {
                return this.$store.state.app.cachePage;
            },
            lang () {
                return this.$store.state.app.lang;
            },
            menuTheme () {
                return this.$store.state.app.menuTheme;
            },
            mesCount () {
                return this.$store.state.app.messageCount;
            }
        },
        methods: {
            init () {
                let pathArr = util.setCurrentPath(this, this.$route.name);
                //这里要做一个判断啊，判断不同的列表，读取不同的值。
                // this.$store.commit('updateMenulistNew');
                this.$store.commit('updateMenulistAnOverviewOfApplicationStatistics');
                if (pathArr.length >= 2) {
                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                this.userName = Cookies.get('user');
                let messageCount = 3;
                this.messageCount = messageCount.toString();
                this.checkTag(this.$route.name);
                this.$store.commit('setMessageCount', 3);
            },
            toggleClick () {
                this.shrink = !this.shrink;
            },
            handleClickUserDropdown (name) {
                if (name === 'ownSpace') {
                    util.openNewPage(this, 'ownspace_index');
                    this.$router.push({
                        name: 'ownspace_index'
                    });
                } else if (name === 'loginout') {
                    // 退出登录
                    this.$store.commit('logout', this);
                    this.$store.commit('clearOpenedSubmenu');
                    this.$router.push({
                        name: 'login'
                    });
                }
            },
            checkTag (name) {
                let openpageHasTag = this.pageTagsList.some(item => {
                    if (item.name === name) {
                        return true;
                    }
                });
                if (!openpageHasTag) { //  解决关闭当前标签后再点击回退按钮会退到当前页时没有标签的问题
                    util.openNewPage(this, name, this.$route.params || {}, this.$route.query || {});
                }
            },
            handleSubmenuChange (val) {
                // console.log(val)
            },
            beforePush (name) {
                // if (name === 'accesstest_index') {
                //     return false;
                // } else {
                //     return true;
                // }
                return true;
            },
            fullscreenChange (isFullScreen) {
                // console.log(isFullScreen);
            }
        },
        watch: {
            '$route' (to) {
                this.$store.commit('setCurrentPageName', to.name);
                let pathArr = util.setCurrentPath(this, to.name);
                if (pathArr.length > 2) {
                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                this.checkTag(to.name);
                localStorage.currentPageName = to.name;
                var abc = document.getElementsByClassName('ivu-menu-item')[0];
                abc.className = 'ivu-menu-item '
            },
            lang () {
                util.setCurrentPath(this, this.$route.name); // 在切换语言时用于刷新面包屑
            }
        },
        mounted () {
            this.init();
        },
        created () {
            //清除所有标题栏
            this.$store.commit('clearAllTagsAll');
            // this.$store.commit('addOpenSubmenu');
            // 显示打开的页面的列表
            this.$store.commit('setOpenedList');
        }
    };
    //用流氓的方式来解决问题
    setTimeout(function(){
        var abc = document.getElementsByClassName('ivu-menu-item')[0];
        abc.className = 'ivu-menu-item ivu-menu-item-active ivu-menu-item-selected'
    },2000)
</script>
